<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        loading-text=''
      >
        <van-cell v-for="item in communityName" :key="item" :title="item" />
      </van-list>
    </form>
  </div>
</template>

<script>
// import { Toast } from 'vant'
import { serchCommunity } from '@/api/area'
export default {
  name: 'serch',
  data () {
    return {
      value: '',
      communityName: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.communityName.push(this.communityName.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.communityName.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
    async onSearch (val) {
      // Toast(val)
      // val是输入框的值
      // console.log(val)
      const { body } = await serchCommunity(val, 'AREA|88cff55c-aaa4-e2e0')
      // console.log(body)
      body.forEach(item => {
        this.communityName.push(item.communityName)
      })
      console.log(this.communityName)
      this.finished = true
    },

    onCancel () {
      this.$router.go(-1)
    }
  }
}
</script>

<style></style>
